<!-- 基本费方式变更 -->
<template>
  <view v-if="stepNmuber == 1">
    <view style="background: #fff;  padding: 10px 10px 10px; border-radius: 4px;" class="pb140">
      <uni-section title="基本信息" type="line" style="background: #fff;" />
      <uni-forms ref="formref" :modelValue="paramForm" :rules="formrules" labelWidth="90px" label-position="top" class="mb10">
        <uni-forms-item label="用户户号" name="yhbh">
          <uni-easyinput v-model="paramForm.yhbh" disabled />
        </uni-forms-item>
        <uni-forms-item label="用户名称" name="yhmc">
          <uni-easyinput v-model="paramForm.yhmc" disabled />
        </uni-forms-item>
        <uni-forms-item label="用电地址" name="yhdz">
          <uni-easyinput v-model="paramForm.yhdz" disabled />
        </uni-forms-item>
        <uni-forms-item label="原基本费类别">
          <uni-easyinput v-model="paramForm.yjbflbText " disabled />
        </uni-forms-item>
        <uni-forms-item label="联系人" name="lxr" required>
          <uni-easyinput v-model="paramForm.lxr" placeholder="联系人" />
        </uni-forms-item>
        <uni-forms-item label="联系电话" name="lxsj" required>
          <uni-easyinput v-model="paramForm.lxsj" placeholder="联系电话" />
        </uni-forms-item>
        <uni-forms-item label="基本费类别" name="jbflb" required>
          <uni-data-select v-model="paramForm.jbflb" :localdata="DYDJLIST" placeholder="请选择基本费类别" :clear="false"></uni-data-select>
        </uni-forms-item>
      </uni-forms>
    </view>
    <view class="button-submit"><button type="primary" @click="formFubmit">基本费方式变更确认</button></view>
  </view>
  <view v-if="stepNmuber == 2">
    <business-signature @signatureConfirm="signatureConfirm" @signatureCancel="stepNmuber = 1" />
  </view>

  <cUserinfoSelect v-if="!paramForm.yhbh" @setYhbh="doSelectYhbh" />

</template>

<script setup lang="ts">
  import cUserinfoSelect from "@/pages/bspsd/components/userinfo-select.vue";
  import businessSignature from "@/pages/bspsd/components/business-signature.vue";
  import { SysZfdmQuery } from "@/api/request/SysZfdmQuery";
  import { getPhone } from "@/utils/storage";
  import { HlwJiBenFeiFangShiBianGeng } from "@/api/request/ykgl";
  import { GetYhJbxx } from "@/api/request/GetYhJbxx";
  import { SysFiles } from "@/api/tables/SysFiles";
  import { SysZfdm } from "@/api/tables/SysZfdm"

  import { ref } from 'vue';

  const paramForm = ref({
    yhbh: '',
    yhmc: '',
    lxr: '',
    lxsj: '',
    yhdz: '',
    yjbflb: '',
    yjbflbText: '',
    jbflb: '',
    dzqm: {} as SysFiles
  })
  const formrules = {
    lxr: { rules: [{ required: true, errorMessage: '请输入联系人' }] },
    lxsj: {
      rules: [
        { required: true, errorMessage: '请输入联系电话' },
        { pattern: /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/, errorMessage: '手机号码格式错误！' },
      ]
    },
    jbflb: { rules: [{ required: true, errorMessage: '请选择基本费类别' }] },
  }
  const formref = ref(null)
  const stepNmuber = ref(1)
  const DYDJLIST = ref<Array<SysZfdm>>([])

  function formFubmit() {
    // 数据校验
    formref.value.validate().then(res => {
      uni.showModal({
        title: "是否确定提交?",
        cancelText: "取消",
        confirmText: "确定",
        confirmColor: "#F43F3B",
        success: (res) => {
          if (res.confirm) {
            // uni.navigateTo({ url: "./agreement" })
            stepNmuber.value = 2
          }
        }
      })
    }).catch(err => {
      // console.log('表单错误信息：', err);
      uni.showToast({ icon: "none", title: err[0].errorMessage })
    })
  }

  function doSelectYhbh(yhbh : string) {
    GetYhJbxx({
      data: { yhbh: yhbh },
      success: (res) => {
        if (res.length != 1) {
          uni.showModal({
            title: '错误提示',
            content: '查询数据时发生内部逻辑错误',
            showCancel: false,
            success: function () {
              uni.navigateBack()
            }
          })
          return
        }
        let obj = res[0] || {}
        paramForm.value.yhbh = obj.yhbh
        paramForm.value.yhmc = obj.yhmc
        paramForm.value.lxsj = getPhone()
        paramForm.value.lxr = obj.lxr
        paramForm.value.yhdz = obj.yhdz
        paramForm.value.yjbflb = obj.jbflb
        SysZfdmQuery({
          data: { zfdm: { dmzl: "JBFLB" } },
          success: (result) => {
            let list = result || []
            for (let item of list) {
              item.text = item.dmnr
              item.value = item.dmbh
              if (obj.jbflb == item.dmbh) {
                item.disable = true
                paramForm.value.yjbflbText = item.dmnr
              }
            }
            DYDJLIST.value = list
          }
        })
      },
      fail: (_code, message) => {
        uni.showModal({ content: message, showCancel: false })
        uni.navigateBack()
      }
    })
  }
  // 签名完成
  const signatureConfirm = (file) => {
    paramForm.value.dzqm = file
    addClick()
  }
  const addClick = function () {
    HlwJiBenFeiFangShiBianGeng({
      data: {
        jbxx: {
          yhbh: paramForm.value.yhbh,
          yhmc: paramForm.value.yhmc,
          lxr: paramForm.value.lxr,
          lxsj: paramForm.value.lxsj,
          yjbflb: paramForm.value.yjbflb,
          jbflb: paramForm.value.jbflb,
        },
        dzqm: paramForm.value.dzqm,
      },
      success: (result) => {
        uni.showModal({
          title: "提示",
          content: "你的业务已提交成功，稍后可以在：我的->业务办理中查询进度！",
          showCancel: false,
          success: () => {
            uni.navigateBack()
          },
        })
      },
      fail: (_code, message) => {
        uni.showModal({
          title: "错误提示",
          content: "提交失败：" + message,
          showCancel: false,
          success: () => {
            uni.navigateBack()
          }
        })
      }
    })
  }
</script>

<style lang="scss" scoped>

</style>